import React, { useState, useRef } from "react";
import './index.css';
import { useNavigate } from "react-router-dom";
function Material() {
  const scrollToTopRef = useRef(null);

  const handleScrollToTop = () => {
    if (scrollToTopRef.current) {
      window.scrollTo({
        top: 0,
        behavior: "smooth"
      });
    }
  };
  // 跳转到人工聊天页面
  const nav=useNavigate();
  const People=()=>{
    nav('/Chat')
  }
  // 设计
  const images = [
    'https://gaoding-market.dancf.com/market-operations/market/side/a1b20846a70e4fafa6e03d317152afc0/1731321848898.jpg?x-oss-process=image/format,webp',
    'https://gaoding-market.dancf.com/market-operations/market/side/e31a712c2bb84afe97030685c056977e/1731322129724.jpg?x-oss-process=image/format,webp',
    'https://gaoding-market.dancf.com/market-operations/market/side/d1c8f17a5bbf4e0ebca9e1f01c0842a2/1723805913052.png?x-oss-process=image/format,webp',
    'https://gaoding-market.dancf.com/market-operations/market/side/21dc8dfc8f1243f2b814b47ba88827e6/1731322225183.jpg?x-oss-process=image/format,webp',
    'https://gaoding-market.dancf.com/market-operations/market/side/5b8bf1b5fcc14bd2b4b2071c7b7af81a/1728699682628.jpg?x-oss-process=image/format,webp',
    'https://gaoding-market.dancf.com/market-operations/market/side/f2f5d7c42ff14466b205e19dbace7060/1731322353205.jpg?x-oss-process=image/format,webp',
    'https://gaoding-market.dancf.com/market-operations/market/side/75f3f4e7229546c8a20216f59214729d/1731323041519.jpg?x-oss-process=image/format,webp',
    'https://gaoding-market.dancf.com/market-operations/market/side/6a7d28e309224d12a1f19e843978b6d2/1731323114977.jpg?x-oss-process=image/format,webp',
    'https://gaoding-market.dancf.com/market-operations/market/side/56983ac3426e401c865e74f3868a9e5b/1723806212526.png?x-oss-process=image/format,webp',
    'https://gaoding-market.dancf.com/market-operations/market/side/7a83346971c746f39c412b6f51c8a7c4/1723806243846.png?x-oss-process=image/format,webp',
    'https://gaoding-market.dancf.com/market-operations/market/side/ed573c6d717f444f9c46aa819108739a/1731323381716.jpg?x-oss-process=image/format,webp',
    'https://gaoding-market.dancf.com/market-operations/market/side/b075cd24585a47e294841341cf3f268f/1731323481347.jpg?x-oss-process=image/format,webp',
    'https://gaoding-market.dancf.com/market-operations/market/side/6a47da82bdb6461180ef9396d0d0f26b/1723806327891.png?x-oss-process=image/format,webp',
    'https://gaoding-market.dancf.com/market-operations/market/side/2ffa5b8ee487415eb8a02091c131cab3/1723806566616.jpg?x-oss-process=image/format,webp',
    'https://gaoding-market.dancf.com/market-operations/market/side/a1aadaab33bd44bbaa5116c26c88c86e/1723806616007.png?x-oss-process=image/format,webp',
    'https://gaoding-market.dancf.com/market-operations/market/side/e91964a837294e76873432d8b57dbaeb/1723806715705.jpg?x-oss-process=image/format,webp',
  ];
  const [currentIndex, setCurrentIndex] = useState(0);

  const handlePrevClick = () => {
    setCurrentIndex((prevIndex) => (prevIndex === 0 ? images.length - 1 : prevIndex - 1));
  };

  const handleNextClick = () => {
    setCurrentIndex((prevIndex) => (prevIndex === images.length - 1 ? 0 : prevIndex + 1));
  };
  // 春节
  const imagesa = [
    'https://gaoding-market.dancf.com/market-operations/market/side/00aad3c2dd5e44bca654799dbe2e02a3/1734676447681.jpg?x-oss-process=image/resize,w_332,type_6/sharpen,120/interlace,1/format,webp',
    'https://gaoding-market.dancf.com/market-operations/market/side/3d19a138ed9749b5a3d2fd102c84a9f1/1734677161645.jpg?x-oss-process=image/resize,w_332,type_6/sharpen,120/interlace,1/format,webp',
    'https://gaoding-market.dancf.com/market-operations/market/side/f26bd3a4c9e9482eb4943823102d6657/1734677323787.png?x-oss-process=image/resize,w_332,type_6/sharpen,120/interlace,1/format,webp',
    'https://gaoding-market.dancf.com/market-operations/market/side/f1f0e7146ea04cc1b01463025dc1618f/1734677539698.jpg?x-oss-process=image/resize,w_332,type_6/sharpen,120/interlace,1/format,webp',
    'https://gaoding-market.dancf.com/market-operations/market/side/164e94baf7c04c6db90677eed25bef20/1734677895770.jpg?x-oss-process=image/resize,w_332,type_6/sharpen,120/interlace,1/format,webp',
    'https://gaoding-market.dancf.com/market-operations/market/side/fd39a87131ab4cf2879c75327efc692c/1734678161939.jpg?x-oss-process=image/resize,w_332,type_6/sharpen,120/interlace,1/format,webp',
    'https://gaoding-market.dancf.com/market-operations/market/side/9dc20fe6a0924638bbdebadbdecd73e7/1734678330573.jpg?x-oss-process=image/resize,w_332,type_6/sharpen,120/interlace,1/format,webp',
    'https://gaoding-market.dancf.com/market-operations/market/side/724f5bda18434719bf86dc0033504e08/1734678773940.jpg?x-oss-process=image/resize,w_332,type_6/sharpen,120/interlace,1/format,webp',
    'https://gaoding-market.dancf.com/market-operations/market/side/cca207f02d3c4db5b80d30398076bb15/1734678939759.jpg?x-oss-process=image/resize,w_332,type_6/sharpen,120/interlace,1/format,webp',
    'https://gaoding-market.dancf.com/market-operations/market/side/84b3ed0396a5449bb97770d44b2bc297/1734679306017.jpg?x-oss-process=image/resize,w_332,type_6/sharpen,120/interlace,1/format,webp',
    'https://gaoding-market.dancf.com/market-operations/market/side/c0a9a237499a48179f2ea9151ad1ed29/1734679332675.jpg?x-oss-process=image/resize,w_332,type_6/sharpen,120/interlace,1/format,webp'
  ];
  const [currentaIndex, setCurrentaIndex] = useState(0);
  const handlePrevaClick = () => {
    setCurrentaIndex((prevIndex) => (prevIndex === 0 ? imagesa.length - 1 : prevIndex - 1));
  };

  const handleNextaClick = () => {
    setCurrentaIndex((prevIndex) => (prevIndex === imagesa.length - 1 ? 0 : prevIndex + 1));
  };
  // 多色系
  const imagesb = [
    'https://gaoding-market.dancf.com/market-operations/market/side/c3119d9d7e6f44e8a6584fe13fd259df/1731313030492.jpg?x-oss-process=image/resize,w_332,type_6/sharpen,120/interlace,1/format,webp',
    'https://gaoding-market.dancf.com/market-operations/market/side/22f7dc836c054f5a91d1cfb38aa3d321/1731313235890.jpg?x-oss-process=image/resize,w_332,type_6/sharpen,120/interlace,1/format,webp',
    'https://gaoding-market.dancf.com/market-operations/market/side/a873dcca5a16441b87cd9934563056f0/1731313704039.jpg?x-oss-process=image/resize,w_332,type_6/sharpen,120/interlace,1/format,webp',
    'https://gaoding-market.dancf.com/market-operations/market/side/1fe6f08fc0b242ceb3f7c9f9941d516a/1731313434834.jpg?x-oss-process=image/resize,w_332,type_6/sharpen,120/interlace,1/format,webp',
    'https://gaoding-market.dancf.com/market-operations/market/side/702eb8315ae34998873a089cb469198d/1731314324205.jpg?x-oss-process=image/resize,w_332,type_6/sharpen,120/interlace,1/format,webp',
    'https://gaoding-market.dancf.com/market-operations/market/side/0d776cd96e364b3e914e99eab17712c9/1731489376668.jpg?x-oss-process=image/resize,w_332,type_6/sharpen,120/interlace,1/format,webp',
    'https://gaoding-market.dancf.com/market-operations/market/side/796b020064e9458b809c7f534739e70d/1731314340900.jpg?x-oss-process=image/resize,w_332,type_6/sharpen,120/interlace,1/format,webp',
    'https://gaoding-market.dancf.com/market-operations/market/side/100bd911cfb14a299795c770dd7ea5f4/1731314333752.jpg?x-oss-process=image/resize,w_332,type_6/sharpen,120/interlace,1/format,webp',
    'https://gaoding-market.dancf.com/market-operations/market/side/36870928533b4daab0cbe64db5860637/1731489428320.jpg?x-oss-process=image/resize,w_332,type_6/sharpen,120/interlace,1/format,webp',
    'https://gaoding-market.dancf.com/market-operations/market/side/3ba3fca4b38a455d923e61cf01a05f6d/1731314346300.jpg?x-oss-process=image/resize,w_332,type_6/sharpen,120/interlace,1/format,webp',
    'https://gaoding-market.dancf.com/market-operations/market/side/732b0db7fced4b48a3dba0662be1439d/1731314350996.jpg?x-oss-process=image/resize,w_332,type_6/sharpen,120/interlace,1/format,webp',
    'https://gaoding-market.dancf.com/market-operations/market/side/8c508adf7fb441b2bcd2635fc1d1b0fa/1731489670432.jpg?x-oss-process=image/resize,w_332,type_6/sharpen,120/interlace,1/format,webp',
    'https://gaoding-market.dancf.com/market-operations/market/side/2d58086ee1a9421b95a16ab06ac0e60f/1731489700246.jpg?x-oss-process=image/resize,w_332,type_6/sharpen,120/interlace,1/format,webp',
    'https://gaoding-market.dancf.com/market-operations/market/side/aa562249bc18461fbb53542288d85043/1731314355447.jpg?x-oss-process=image/resize,w_332,type_6/sharpen,120/interlace,1/format,webp',
  ];
  const [currentbIndex, setCurrentbIndex] = useState(0);

  const handlePrevbClick = () => {
    setCurrentbIndex((prevIndex) => (prevIndex === 0 ? imagesb.length - 1 : prevIndex - 1));
  };

  const handleNextbClick = () => {
    setCurrentbIndex((prevIndex) => (prevIndex === imagesb.length - 1 ? 0 : prevIndex + 1));
  };
  // 促销
  const imagesc = [
    'https://gaoding-market.dancf.com/market-operations/market/side/4a16cf3250164d6a9ef75566a3203df7/1729847680887.jpg?x-oss-process=image/resize,w_332,type_6/sharpen,120/interlace,1/format,webp',
    'https://gaoding-market.dancf.com/market-operations/market/side/bfc0ca5e765b45a8990190a87f87e96b/1729847752711.jpg?x-oss-process=image/resize,w_332,type_6/sharpen,120/interlace,1/format,webp',
    'https://gaoding-market.dancf.com/market-operations/market/side/e357bb04b26a4b8691ab96824a35bfdf/1729848067811.jpg?x-oss-process=image/resize,w_332,type_6/sharpen,120/interlace,1/format,webp',
    'https://gaoding-market.dancf.com/market-operations/market/side/7553958bad51495cbb06b88b57c11a1c/1729848143008.jpg?x-oss-process=image/resize,w_332,type_6/sharpen,120/interlace,1/format,webp',
    'https://gaoding-market.dancf.com/market-operations/market/side/f1a454c51d844aaea5ebc5b23bed81af/1729848343790.jpg?x-oss-process=image/resize,w_332,type_6/sharpen,120/interlace,1/format,webp',
    'https://gaoding-market.dancf.com/market-operations/market/side/acd2fb0e01224b4e8aca8c8cb6d4f81f/1729848903183.jpg?x-oss-process=image/resize,w_332,type_6/sharpen,120/interlace,1/format,webp',
    'https://gaoding-market.dancf.com/market-operations/market/side/1b2e2ef8231643c2b28222ec80abb1bc/1729849465420.jpg?x-oss-process=image/resize,w_332,type_6/sharpen,120/interlace,1/format,webp',
  ];
  const [currentcIndex, setCurrentcIndex] = useState(0);

  const handlePrevcClick = () => {
    setCurrentcIndex((prevIndex) => (prevIndex === 0 ? imagesb.length - 1 : prevIndex - 1));
  };

  const handleNextcClick = () => {
    setCurrentcIndex((prevIndex) => (prevIndex === imagesb.length - 1 ? 0 : prevIndex + 1));
  };
  // 鼠标划过出现人工聊天
  const [isOpen, setIsOpen] = useState(false);

  const handleMouseEnter = () => {
    setIsOpen(true);
  };

  const handleMouseLeave = () => {
    setIsOpen(false);
  };

  return (
    <div className='Material'>
      <div className='MaterialTop'>
        <div className='PingMian'>
          <dl>
            <dt>平面模板<span>更多&rarr;</span></dt>
            <dd>
              <img src="https://gaoding-market.dancf.com/market-operations/market/side/84d2a4a6e0f340a5ba61ef8efa7d9f2f/1735522538640.jpg?x-oss-process=image/format,webp" alt="" className='img1' />
              <img src="https://gaoding-market.dancf.com/market-operations/market/side/e3e268dc79a9407793d8a081d17ca54c/1735179459999.jpg?x-oss-process=image/format,webp" alt="" className='img2' />
              <img src="https://gaoding-market.dancf.com/market-operations/market/side/28899cfd70414c1aa900b685a85fa15b/1735180832296.jpg?x-oss-process=image/format,webp" alt="" className='img3' />
            </dd>
          </dl>
        </div>
        <div className='ZhiBo'>
          <dl>
            <dt>直播系列<span>更多&rarr;</span></dt>
            <dd>
              <img src="https://gaoding-market.dancf.com/market-operations/market/side/34f5408bc27d4af4a2f9d22c4c660fde/1735180527885.jpg?x-oss-process=image/format,webp" alt="" className='img1' />
              <img src="https://gaoding-market.dancf.com/market-operations/market/side/d6a2f0e1115e4adda03c41d242f4c863/1735180691045.jpg?x-oss-process=image/format,webp" alt="" className='img2' />
            </dd>
          </dl>
        </div>
        <div className='RedBook'>
          <dl>
            <dt>小红书<span>更多&rarr;</span></dt>
            <dd>
              <img src="https://gaoding-market.dancf.com/market-operations/market/side/ea0d2400c6dc4b2790739b262a57f1dd/1735181801641.jpg?x-oss-process=image/format,webp" alt="" className='img1' />
            </dd>
          </dl>
          <dl>
            <dt>电商系列<span>更多&rarr;</span></dt>
            <dd>
              <img src="https://gaoding-market.dancf.com/market-operations/market/side/1f45461ba689447eac92ec60c28ebc77/1733122194797.png?x-oss-process=image/format,webp" alt="" className='img2' />
            </dd>
          </dl>
        </div>
        <div className='Element'>
          <dl>
            <dt>免抠元素<span>更多&rarr;</span></dt>
            <dd>
              <img src="https://gaoding-market.dancf.com/market-operations/market/side/b37a264c4ed54e8e8b43287e00a75c67/1735183856936.jpg?x-oss-process=image/format,webp" alt="" className='img1' />
            </dd>
          </dl>
          <dl>
            <dt>H5<span>更多&rarr;</span></dt>
            <dd>
              <img src="https://gaoding-market.dancf.com/market-operations/market/side/4990522e57c54a6d9c5fb77ce0e0b049/1733122559448.png?x-oss-process=image/format,webp" alt="" className='img2' />
            </dd>
          </dl>
        </div>
        <div className='PPT'>
          <dl>
            <dt>PPT<span>更多&rarr;</span></dt>
            <dd>
              <img src="https://gaoding-market.dancf.com/market-operations/market/side/bb24098c34754a86a847e2c2fbf2cb61/1733123102695.png?x-oss-process=image/format,webp" alt="" className='img1' />
            </dd>
          </dl>
          <dl>
            <dt>视频<span>更多&rarr;</span></dt>
            <dd>
              <video src="https://gaoding-market.dancf.com/market-operations/market/side/c60d79d5ab004d32a50824098f2834c4/1721302735804.mp4" muted="muted" loop="loop" className='img2'></video>
            </dd>
          </dl>
        </div>
      </div>
      <div className="SheJi">
        <h2>设计趋势</h2>
        <div className="carousel-container">
          <button className="carousel-btn prev-btn" onClick={handlePrevClick}>←</button>
          <div className="carousel-slide" style={{ transform: `translateX(-${currentIndex * 100}%)` }}>
            {images.map((imageUrl, index) => (
              <img key={index} src={imageUrl} alt={`Image ${index}`} />
            ))}
          </div>
          <button className="carousel-btn next-btn" onClick={handleNextClick}>→</button>
        </div>
      </div>
      <div className="CunJie">
        <h2>春节专题</h2>
        <div className="carousel-container">
          <button className="carousel-btn prev-btn" onClick={handlePrevaClick}>←</button>
          <div className="carousel-slide" style={{ transform: `translateX(-${currentaIndex * 100}%)` }}>
            {imagesa.map((imageUrl, index) => (
              <img key={index} src={imageUrl} alt={`images ${index}`} />
            ))}
          </div>
          <button className="carousel-btn next-btn" onClick={handleNextaClick}>→</button>
        </div>
      </div>
      <div className="DuoSize">
        <h2>多色系背景</h2>
        <div className="carousel-container">
          <button className="carousel-btn prev-btn" onClick={handlePrevbClick}>←</button>
          <div className="carousel-slide" style={{ transform: `translateX(-${currentbIndex * 100}%)` }}>
            {imagesb.map((imageUrl, index) => (
              <img key={index} src={imageUrl} alt={`images ${index}`} />
            ))}
          </div>
          <button className="carousel-btn next-btn" onClick={handleNextbClick}>→</button>
        </div>
      </div>
      <div className="CuXiao">
        <h2>促销通用元素</h2>
        <div className="carousel-container">
          <button className="carousel-btn prev-btn" onClick={handlePrevcClick}>←</button>
          <div className="carousel-slide" style={{ transform: `translateX(-${currentcIndex * 100}%)` }}>
            {imagesc.map((imageUrl, index) => (
              <img key={index} src={imageUrl} alt={`images ${index}`} />
            ))}
          </div>
          <button className="carousel-btn next-btn" onClick={handleNextcClick}>→</button>
        </div>
      </div>
      <button
        ref={scrollToTopRef}
        onClick={handleScrollToTop}
        style={{
          position: "fixed",
          bottom: "70px",
          right: "20px",
          zIndex: 1000
        }}
        className="BackTop"
      >
        ^
      </button>
      <div>
        <button onMouseEnter={handleMouseEnter}
          onMouseLeave={handleMouseLeave}
          style={{
            position: "fixed",
            bottom: "0px",
            right: "20px",
            zIndex: 1000
          }}
           className="WenHao"
          >
          ?
        </button>
        {isOpen && (
          <div onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} className="Wenhaoa">
            <button onClick={People}>人工客服</button><br />
            <button>帮组中心</button><br />
            <button>建议意见</button><br />
            <button>新手引导</button><br />
            <button>更新日志</button><br />
            <button>提模板需求</button>
          </div>
        )}
      </div>
    </div>
  )
}

export default Material
